<template>
  <div>
    <button @click="addRoute">添加</button>
    <button @click="delRoute">删除</button>
    <button @click="getRoute">所有</button>
    <button @click="hasRoute">检查</button>
    <br>

    <button @click="$router.push('/heavy-name-cover')">HeavyNameCover</button>
    <button @click="$router.push('/heavy-name-effect')">HeavyNameEffect</button>

    <button @click="$router.push('/nesting')">Nesting</button>
    <button @click="$router.push('/nesting-children')">NestingChildren</button>

    <RouterView/>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'AddRemoveRoute',
  methods: {
    addRoute() {
      // 添加名称冲突的路由时，后一个将覆盖前一个，且只能通过编程式路由使用，声明式路由给出告警No match found for location with path
      this.$router.addRoute({
        path: '/heavy-name-cover',
        name: 'HeavyName',
        component: () => import('@/views/addRoute_removeRoute/AddRemoveRouteChildren.vue')
      });
      this.$router.addRoute({
        path: '/heavy-name-effect',
        name: 'HeavyName',
        component: () => import('@/views/addRoute_removeRoute/AddRemoveRouteChildren.vue')
      });

      // 添加嵌套路由将父路由的name作为addRoute的第一个参数，也可以通过children直接配置
      this.$router.addRoute({
        path: '/nesting',
        name: 'Nesting',
        component: () => import('@/views/addRoute_removeRoute/AddRemoveRouteChildren.vue'),
        children: []
      });
      this.$router.addRoute(
        'Nesting',
        {
          path: '/nesting-children',
          name: 'NestingChildren',
          component: () => import('@/views/addRoute_removeRoute/AddRemoveRouteChildren.vue')
        }
      );
    },
    delRoute() {
      // 当路由被删除时，该路由的所有别名和子路由都被删除
      this.$router.removeRoute('Nesting');
    },
    getRoute() {
      console.log(this.$router.getRoutes());
    },
    hasRoute() {
      console.log(this.$router.hasRoute('NestingChildren'));
    },
  }
});
</script>

<style scoped>
button, a {
  margin-right: 10px;
  margin-bottom: 20px;
}
</style>